<template>
  <div class="user">
    <!-- 头部 -->
    <header @click="$router.push('/compile')">
      <!-- 用户照片 -->
      <div class="picture">
        <!-- 防止有些账户没有头像 userInfo.head_img不存在时 添加默认头像 -->
        <img
          v-if="userInfo.head_img"
          :src="'http://157.122.54.189:9083' + userInfo.head_img"
          alt=""
        />
        <img v-else src="https://img.yzcdn.cn/vant/leaf.jpg" alt="" />
      </div>
      <!-- 用户信息 -->
      <div class="userInfo">
        <div class="name">
          <!-- vue 独有添加属性 对象中条件key 成立对应的value值生效 -->
          <span
            class="iconfont"
            :class="{
              iconxingbienv: userInfo.gender == 0,
              iconxingbienan: userInfo.gender == 1,
            }"
          ></span>
          <!--防止个别用户注册是忘记填写昵称  用账号代替 -->
          {{ userInfo.nickname || userInfo.username }}
        </div>
        <div class="birthday">
          <span>1998-05-28</span>
        </div>
      </div>
      <!-- 箭头 -->
      <div>
        <span class="iconfont iconjiantou1"></span>
      </div>
    </header>
    <ProfileBar
      label="我的关注"
      desc="关注的用户"
      @click.native="$router.push('/follow')"
    />
    <ProfileBar
      label="我的跟帖"
      desc="跟帖/回复"
      @click.native="$router.push('/comment')"
    />
    <ProfileBar
      label="我的收藏"
      desc="文章/视频"
      @click.native="$router.push('/favorite')"
    />
    <ProfileBar label="设置" @click.native="$router.push('/compile')" />
    <ProfileBar label="退出" @click.native="logout" />
    <Return father=".user" paths="/" />
  </div>
</template>

<script>
import ProfileBar from "@/components/ProfileBar";
import Return from "@/components/Return";
export default {
  components: { ProfileBar, Return },
  data() {
    return {
      // 用来储存 请求回来的 data对象
      userInfo: {},
    };
  },
  mounted() {
    this.$axios({
      url: "/user/" + localStorage.getItem("userId"),
    }).then((res) => {
      console.log(res);
      const { message, data } = res.data;
      if (message === "获取成功") {
        this.userInfo = data;
      }
    });
  },
  methods: {
    // 退出登录
    logout() {
      // 清除 本地的 token 与 id
      localStorage.removeItem("token");
      localStorage.removeItem("userId");
      this.$toast({
        message: "退出成功",
        position: "bottom",
      });
      // 因为push到登录页面返回还是个人中心  所以需要用到replace替换页面
      this.$router.replace("/login");
    },
  },
};
</script>

<style lang="less" scoped>
.user {
  position: relative;
  left: 0;
  background-color: #f2f2f2;
  min-height: 100vh;
}
header {
  height: 100 / 360 * 100vw;
  padding: 15 / 360 * 100vw 20 / 360 * 100vw;
  border-bottom: 5 / 360 * 100vw solid #e4e4e4;

  display: flex;
  align-items: center;
  justify-content: space-between;
  .picture {
    img {
      width: 70 /360 * 100vw;
      height: 70 /360 * 100vw;
      border-radius: 50%;
      overflow: hidden;
    }
  }
  .userInfo {
    padding-right: 110 / 360 * 100vw;
    padding-left: 20 / 360 * 100vw;
    font-size: 10 / 360 * 100vw;
    height: 40 / 360 * 100vw;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .iconxingbienv {
      font-size: 16 / 360 * 100vw;
      margin-right: 5 / 360 * 100vw;
      color: hotpink;
    }
    .iconxingbienan {
      font-size: 16 / 360 * 100vw;
      margin-right: 5 / 360 * 100vw;
      color: #81bfec;
    }
    .birthday {
      color: #bbb2ad;
    }
  }
  .iconjiantou1 {
    font-size: 16 / 360 * 100vw;
    font-weight: 700;
    color: #bbb2ad;
  }
}
</style>